<template>
  <div :class="['secondary-menu', { openCollect: modelValue }]">
    <div :class="{ 'menu-cont': !putMuneBool }">
      <div :class="['secondary-menu-item', activeClass(item)]"
        v-for="(item, index) in menu"
        :key="index">
        <a @click="menuItemClick(item)"
          active-class="active"
          v-if="!item.children || item.children.length === 0"
          :class="['linkItem', { active: activeComFun(item.url) }]">
          <span style="display: flex">
            <i class="iconfont"
              :class="item.icon || ''"></i>
            <span class="label-wrap">{{ item.name }}</span>
          </span>
        </a>
        <a class="linkItem arrow-item"
          v-else
          @click="openClick(item)">
          <span style="display: flex">
            <i class="iconfont"
              :class="item.icon || ''"></i>
            <span class="label-wrap">{{ item.name }}</span>
          </span>
          <i :class="[
              'iconfont the-arrow icon-xiangyou',
              { 'arrow-change': item.open },
            ]"></i>
        </a>
        <template v-if="item.children && item.children.length">
          <ul class="sub-menu-item text-wrap"
            :style="styleFun(item)">
            <li v-for="(ittl, itInd) in item.children"
              :class="activeClass(ittl, true)"
              @click.stop="subMenuClick(ittl)"
              :key="`${index}${itInd}`">
              {{ ittl.name }}
            </li>
          </ul>
        </template>
      </div>
    </div>
    <div class="secondary-menu-footer">
      <i :class="[
          'iconfont fold-icon icon-shouqicedaohang',
          { 'put-none': putMuneBool },
        ]"
        @click="putMuneClick"></i>
      <span class="span">收起侧导航</span>
    </div>
  </div>
</template>

<script>
  const mapdata = function (list = [], arr = []) {
    for (let me of list) {
      if (me.meta.noMenuPage) continue;
      let node = {
        url: me.path,
        name: me.meta.title,
        icon: me.meta.icon,
        children: [],
        open: false
      };
      arr.push(node);
      if (me.children && me.children.length) {
        mapdata(me.children, node.children);
      }
    }
    return arr;
  };
  export default {
    name: 'SecondaryMenu',
    props: {
      modelValue: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        putMuneBool: false,
        menu: []
      };
    },
    created() {
      this.setMenu();
    },
    methods: {
      setMenu() {
        let submenu = this.$store.state.global.subMenu;
        this.menu = mapdata(submenu);
        console.log(this.menu);
      },
      putMuneClick() {
        this.putMuneBool = !this.putMuneBool;
        this.$emit('update:modelValue', this.putMuneBool);
      },
      // 不含子项的菜单匹配
      activeComFun(url) {
        const path = this.$route.path;
        return url === path || path.indexOf(url) > -1;
      },
      styleFun(item) {
        const height = item.children.length * 60;
        return {
          height: this.modelValue || item.open ? `${height}px` : '0px'
        };
      },
      activeClass(item, bool) {
        const path = this.$route.path;
        let className = '';
        if (item.children && item.children.length) {
          const itBool = item.children.some((e) => {
            // 去掉url后面的参数
            let newurl = e.url.split('?')[0];
            // 优先做精准匹配，匹配不上再包含匹配，不在菜单里的路由为包含匹配
            return newurl === path || path.indexOf(newurl) > -1;
          });
          if (itBool) {
            className = 'activePath';
          }
        }
        // 优先做精准匹配，匹配不上再包含匹配，不在菜单里的路由为包含匹配
        let newurl2 = item.url.split('?')[0];
        if ((newurl2 === path || path.indexOf(newurl2) > -1) && bool) {
          className = 'active';
        }
        return className;
      },
      menuItemClick(item) {
        this.$router.push({ path: item.url });
      },
      subMenuClick(item) {
        this.$router.push({ path: item.url });
      },
      openClick(item) {
        this.$set(item, 'open', !item.open);
      }
    }
  };
</script>
<style lang="scss">
  .secondary-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: $--menu-W;
    height: 100%;
    background: #fff;
    // transition: all 0.5s;
    z-index: $--zindex-min;
    padding-top: 20px;
    box-sizing: border-box;

    .menu-cont {
      margin-right: -6px;
      height: calc(100% - $--mitem-H);
      overflow-y: scroll;
      overflow-x: auto;
    }

    .secondary-menu-item {
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      line-height: $--mitem-H;
      cursor: pointer;

      .linkItem {
        height: $--mitem-H;
        width: $--menu-W;
        text-decoration: none;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .arrow-item > .the-arrow {
        transition: transform 0.3s;
      }
      .iconfont {
        width: 24px;
        min-width: 24px;
        font-size: 24px;
        display: inline-block;
        margin: 0 6px 0 20px;
        text-align: center;
        &.the-arrow {
          font-size: 16px;
        }
      }
      .sub-menu-item {
        padding-left: 0px;
        transition: height 0.3s;
        li {
          height: $--mitem-H;
          line-height: $--mitem-H;
          padding-left: 64px;
        }
      }
      .arrow-change {
        transform: rotate(90deg);
      }
    }

    .secondary-menu-footer {
      width: 100%;
      height: $--mitem-H;
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border-top: 1px solid #dfe0e1;
      line-height: $--mitem-H;

      .put-none {
        transform: rotate(180deg);
      }

      .fold-icon {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        font-size: 20px;
      }

      .span {
        color: #5c6164;
        font-size: 12px;
        font-weight: 400;
        margin-left: 10px;
        margin-right: 80px;
      }

      .switch-wrap {
        display: inline-block;
      }
    }

    .active {
      background: #e4eff7;
      color: $--primary-color;
      border-right: 5px solid $--primary-color;
      box-sizing: border-box;
      .iconfont {
        color: $--primary-color;
      }
    }
    .activePath {
      // 父级菜单也设置颜色
      .iconfont,
      .label-wrap {
        color: $--primary-color;
      }
    }

    .text-wrap {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .openCollect {
    width: $--fold-menu-W;
    text-align: center;

    .secondary-menu-item {
      position: relative;
      .sub-menu-item {
        position: absolute;
        width: 110px;
        background: #fff;
        top: -10px;
        left: $--fold-menu-W;
        border: 1px solid #e8e8e8;
        z-index: $--zindex-map-float-box;
        li {
          padding-left: 0px;
        }
      }

      .linkItem {
        width: $--fold-menu-W;
      }
      .iconfont {
        margin-left: 14px;
      }
    }
    .secondary-menu-item:hover {
      .sub-menu-item {
        display: block;
      }
    }
    .arrow-item > .the-arrow {
      display: none;
    }
    .text-wrap,
    .label-wrap {
      display: none;
    }
    .secondary-menu-footer {
      .span {
        display: none;
      }
    }
  }
</style>